<template>
    <div>
        <a-form :form="form" layout="inline" @submit.prevent="onSubmit" :style="{marginBottom: '20px'}" id="point-search">
            <div class="point-query">
                <a-form-item>
                    <!-- <time-range :time_range="time_range" @change="handleTimeChange"></time-range> -->
                    <a-range-picker :value="time_range" format="YYYY-MM" :mode="mode" @panelChange="handlePanelChange" @change="handleChangeRange" style="width: 240px;"/>
                </a-form-item>
                <a-form-item>
                    <a-select
                        v-decorator="['service_id']"
                        placeholder="服务号名称"
                    >
                        <a-select-option v-for="v in services" :key="v.id" :value="v.id">
                            {{v.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-select
                        v-decorator="['user_id']"
                        placeholder="受理账号"
                    >
                        <a-select-option v-for="v in users" :key="v.id" :value="v.id">
                            {{v.username}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-select
                        v-decorator="['type_id']"
                        placeholder="账目类型"
                    >
                        <a-select-option v-for="(v,k) in types" :key="k" :value="k">
                            {{v}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit">筛选</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" v-if="role == 2" @click="showCreate" icon="plus">变更积分</a-button>
                </a-form-item>
            </div>
        </a-form>

        <a-table :columns="columns" :dataSource="tableData" rowKey="id" :pagination="pagination" bordered>
            <template slot="amount" slot-scope="text, record">
                {{record.icon}}{{record.amount}}
            </template>
            <template slot="order" slot-scope="text, record">
                <router-link :to="'/orders/update/'+record.order_id">{{record.order_sn}}</router-link>
            </template>
            <template slot="action" slot-scope="text, record">
                <router-link :to="'/point/update/'+record.id" v-if="menu_role.includes('/point/update')"><img src="./../../assets/images/view.svg"
                alt=""></router-link>
            </template>
        </a-table>

        <a-modal v-model="showcreate" title="变更积分" @ok="createSubmit" @cancel="cancel"
             centered
             :cancelButtonProps="{ props: {type: 'primary'}}"
             :keyboard = 'false'
             :maskClosable = 'false'
        >
            
            <create :services="services" :types="types" ref="submit" @getList="getList"  @hideCreate="hideCreate"></create>
        </a-modal>
    </div>
</template>
<script>
    import TimeRange from "@/components/timeRange";
    import Create from "./create";
    import moment from 'moment';

    export default {
        components: {TimeRange,Create},
        data() {
            return {
                role:this.$store.getters.role,
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                },
                form: this.$form.createForm(this),
                form_create: this.$form.createForm(this),
                tableData: [],
                columns: [
                    {title: '账目编号', dataIndex: 'sn', align: 'center', width: '20%'},
                    {title: '服务号', dataIndex: 'service_name', align: 'center', width: '10%'},
                    {title: '相关财务', dataIndex: 'finance', align: 'center', width: '10%'},
                    {title: '账目类型', dataIndex: 'type_name', align: 'center', width: '10%'},
                    {title: '相关订单', scopedSlots: {customRender: 'order'}, align: 'center', width: '20%'},
                    {title: '服务号收支(积分)',scopedSlots: {customRender: 'amount'}, align: 'center', width: '10%'},
                    {title: '服务号余额(积分)', dataIndex: 'service_total', align: 'center', width: '10%'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center', width: '10%'},
                ],
                search: {},
                // time_range: moment().format('Y年MM月') + '-' + moment().format('Y年MM月'),
                time_range: [],
                mode: ['month', 'month'],
                users: [],
                types: [],
                services: [],
                showcreate: false,
                previewVisible: false,
                previewImage: '',
                readable: true,
                fileList: []
            };
        },

        mounted() {
            this.getList();
            this.http("get", "service/index", {page_size: 100}).then(res => {
                this.services = res.data
            })
            this.http("get", "user/index", {page_size: 100}).then(res => {
                this.users = res.data
            })
        },
        methods: {
            moment,
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current};

                let data = await this.http(
                    "get",
                    "point/index",
                    Object.assign(req, param)
                );
                this.tableData = data.data;
                this.types = data.types
                this.pagination.total = data.total_count;
            },
            cancel() {
                this.$refs.submit.reset()
            },
            onSubmit() {
                //搜索提交
                this.form.validateFields((err, values) => {
                    // values = {...values, ...{time_range: this.time_range}}
                    if(this.time_range.length > 0) {
                        let startAt = moment(this.time_range[0]).format('YYYY年MM月')
                        let endAt = moment(this.time_range[1]).format('YYYY年MM月')
                        let startEndAt = startAt + '-' + endAt
                        values.time_range = startEndAt
                    }
                    if (!err) {
                        this.pagination.current = 1;
                        this.search = values
                        this.getList(values);
                    }
                })
            },
            showCreate() {
                this.showcreate = true;
            },
            hideCreate(){
                this.showcreate = false;
            },
            handleTimeChange (changedFields) {
                this.time_range = changedFields.time_range.value;
            },
            createSubmit() {
                //子组件提交
                this.$refs.submit.onSubmit()
                //关闭弹窗
                //this.showcreate = false
            },
            handleChange(page, size) {
                //列表展示条数改变
                this.pagination.current = page;
                this.pagination.pageSize = size;
                this.getList(this.search);
            },
            handlePanelChange(value, mode) {
                this.time_range = value;
                this.mode = [
                    mode[0] === 'date' ? 'month' : mode[0],
                    mode[1] === 'date' ? 'month' : mode[1],
                ];
            },
            handleChangeRange(value) {
                this.time_range = value;
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";

    #point-search {
        .ant-input {
            width: 160px;
        }

        .ant-select {
            width: 130px;
        }
    }

    .point-query {
        @include fj(space-between);
        .ant-form-item + .ant-form-item{
            margin-left: 10px;
        }
    }
</style>
